<template>
  <div>
    <div style="width: 100%;">
      <van-icon
          style="position:fixed;top: 20px;left: 20px;cursor: pointer;border-radius: 50%"
          name="arrow-left" color="black"
          size="30px" @click="back"/>
      <p style="color: black;font-size: 16px;width: 100%;margin: 20px auto;">评价</p>
    </div>

    <div style="width: 90%;background-color: #f5f7ff;margin: auto;border-radius: 10px;overflow:hidden;">
      <img :src="order.imageUrl" width="180px" style="float:left;padding: 10px">
      <div style="float:left;margin-top: 15px" align="left">
        <p>
          <span style="font-weight: 700">{{ order.carName }}</span>
          <br>
          <br>
          <span style="font-size: 14px">24%电量</span>
          <br>
          <br>
          <span style="font-size: 14px">￥{{ order.totalPrice }}</span>
        </p>
      </div>
    </div>

    <div style="width: 90%;background-color: #f5f7ff;margin: 20px auto;border-radius: 10px;overflow:hidden;">
      <div style="border-bottom: 1px #aeaeae solid;padding: 10px;text-align: left;overflow:hidden;">
        <div style="width: 50%;float:right;margin-top: 20px">
          <van-rate v-model="review.rating" size="30px" style="float:right;"/>
        </div>
        <p style="font-weight: 700;padding: 10px;width: 100px;">租赁评分</p>
        <p style="font-size: 14px;padding: 10px;width: 100px;color: #757575">满意请打五星哦</p>
      </div>
      <div style="border-bottom: 1px #aeaeae solid;padding: 10px;text-align: left;overflow:hidden;">
        <textarea v-model="review.reviewText" style="border: none; outline: none; resize: none; background-color: transparent;font-size: 14px;padding: 10px;width: 340px;color: #757575;height: 100px;" placeholder="您的评价会帮助到更多人哦"></textarea>
      </div>
      <div style="padding: 10px;text-align: left;overflow:hidden;">
        <p style="font-size: 14px;padding: 10px;width: 100px;color:#757575;">上传图片</p>
        <el-upload
            align="left"
            class="avatar-uploader"
            action="http://localhost:10086/api/user/users/upload/uploadLocal"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>

    <el-button type="primary" style="width: 90%;height: 50px;margin: 20px auto;border-radius: 10px;overflow:hidden;"
               @click="addReview">发布评论
    </el-button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      userId:'',
      avatarUrl: '',
      file: [],
      checked: false,
      value: 0, // 评分
      currentRating: 0, // 当前评分
      comment: '', // 用户评价内容
      order: {
        imageUrl: 'http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_003.PNG',
        carName: '宾利贝滕',
        userName: '',
        paymentTime: '',
        rentalStartDate: '',
        rentalEndDate: '',
        pickupLocation: '',
        totalPrice: '200',
      },
      review:{
        reviewId:'',
        userId:'',
        carId:'',
        rating:0,
        reviewText:'',
        reviewDate:'',
        reviewImageUrl:'',
      }
    };
  },
  created() {
    var user = localStorage.getItem("currentUser")
    if (user == null) {
      this.$message.error("请先登录")
      this.$router.push("/login")
      return;
    }
    this.userId = JSON.parse(user).userId
    this.getByUserId()
  },
  methods: {
    addReview(){
      this.review.userId = this.userId
      this.review.reviewDate = new Date()
      this.axios.post("http://localhost:10086/api/user/reviews/addReviews",this.review).then(res=>{
        if (res.data.code==200){
          this.$message.success("评价成功")
          this.$router.push("/rentalDetails")
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file.raw);
      this.$message.success('上传成功')
      this.avatarUrl = URL.createObjectURL(file.raw)
      this.review.reviewImageUrl = res.data
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    getByUserId() {
      this.axios.get(`http://localhost:10086/api/user/users/rentalDetails/` + this.userId).then(res => {
        if (res.data.code == 200) {
          this.order = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    back() {
      this.$router.push("/rentalDetails");
    },
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>